<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		.input{
			position:fixed;
			top: 10px;
			left: 20px;
		}
		#btn{
			position:fixed;
			top: 11px;
			left: 174px;
			cursor: pointer;
		}
		.lb{
			position:fixed;
			top: 32px;
			left: 20px;
		}
		#zzz{
			position:fixed;
			top: 32px;
			left: 20px;
		}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Tyoib3atwHPHpOc0rQDbgALvOP6bxTdx"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<button id="btn">搜索</button>
	<div id="r-result" class="input"><input type="text" id="suggestId" size="20" style="width:150px;" /></div>
	<div id="zzz"></div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;" class="lb"></div>
</body>
</html>
<script type="text/javascript">
	var result = document.querySelector("#r-result")
	result.onclick = function(){
		zzz.innerHTML = ""
	}
	var map = new BMap.Map("allmap"); 
	var marker 
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity("北京");         
	map.enableScrollWheelZoom(true);    
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			alert('您的位置：'+r.point.lng+','+r.point.lat);
			marker = new BMap.Marker(mk); // 创建点
			marker.addEventListener("click",attribute);
			map.addOverlay(marker);    //增加点
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})
	btn.onclick = function(){
		var myKeys = suggestId.value
		var local = new BMap.LocalSearch(map, {
			renderOptions:{map: map, panel:"zzz"},
			pageCapacity:5
		});
		local.searchInBounds(myKeys, map.getBounds());
	}
	function attribute(){
		var p = marker.getPosition();     
	}
	function G(id) {
		return document.getElementById(id);
	}
	var ac = new BMap.Autocomplete( 
		{"input" : "suggestId"
		,"location" : map
	});
	ac.addEventListener("onhighlight", function(e) { 
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});
	var myValue;
	ac.addEventListener("onconfirm", function(e) { 
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;	
		setPlace();
	});
	function setPlace(){
		map.clearOverlays();
		function myFun(){
			var pp = local.getResults().getPoi(0).point; 
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMap.Marker(pp)); 
		}
		var local = new BMap.LocalSearch(map, { 
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}
</script>

</body>
</html>